<!-- @format -->

<template>
  <div class="katex-test-container">
    <h1>KaTeX 渲染测试</h1>
    
    <div class="test-section">
      <h2>内联公式测试</h2>
      <RichTextWithKatex :content="inlineFormulas" />
    </div>
    
    <div class="test-section">
      <h2>块级公式测试</h2>
      <RichTextWithKatex :content="blockFormulas" />
    </div>
    
    <div class="test-section">
      <h2>上下标测试</h2>
      <RichTextWithKatex :content="superSubFormulas" />
    </div>
  </div>
</template>

<script>
import RichTextWithKatex from '../RichTextWithKatex.vue'

export default {
  components: {
    RichTextWithKatex
  },
  data() {
    return {
      inlineFormulas: `
        <p>内联公式测试: $x^2 + y^2 = z^2$ 和 $E = mc^2$ 以及 $\\sin(\\alpha)^2 + \\cos(\\alpha)^2 = 1$</p>
      `,
      
      blockFormulas: `
        <p>块级公式测试:</p>
        $$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$$
        $$\\int_{a}^{b} f(x) \\, dx = F(b) - F(a)$$
      `,
      
      superSubFormulas: `
        <p>上下标测试:</p>
        <p>单字符上标: $a^2$, $x^n$, $e^{i\\pi}$</p>
        <p>多字符上标: $a^{2x}$, $x^{n+1}$</p>
        <p>单字符下标: $a_1$, $x_n$</p>
        <p>多字符下标: $a_{ij}$, $x_{n+1}$</p>
        <p>混合上下标: $a_i^j$, $x_{i+1}^{n-1}$, $\\sum_{i=1}^{n}$</p>
      `
    }
  }
}
</script>

<style scoped>
.katex-test-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.test-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

h2 {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
</style>